<template>
  <div class="amap-wrapper">
       <el-amap class="amap-box" :zoom="zoom" :center="amap_center" :vid="'amap-vue'" :events="events">
         <!--标点-->
         <el-amap-marker v-for="(marker, index) in amap_markers" :position="marker" :key="index"></el-amap-marker>
       </el-amap>
  </div>
</template>

<script>
  //这个组件用来标点标记坐标
  export default{
    name:'VMap',
    props:['amap_center','amap_markers','catch_map','remove_markers'],
    data(){
      let self=this;
      return {
        zoom: 14,
        events: {
           //点击获取地址数据
           click(e){
             //得到经纬度
             let {lng, lat} = e.lnglat;
             //先清空先前的标点
             self.remove_markers();
             self.catch_map(lng,lat);
           }
        },

      }
    }
  }
</script>

<style>
  .amap-wrapper {
    width: 100%;
    height: 500px;
    margin-top:20px !important;
    margin-bottom: 20px;
  }
</style>
